05 BrowserModule e CommonModule

Vamos continuar! Ao abrirmos o projeto, a aplicação é carregada pela primeira vez, o AppComponent é exibido e, como ele não tem nada no template, a página do navegador está em branco. Em teoria, isto não implica em erro algum. Entretanto, se consultarmos o console do navegador, há a acusação de "Template parse errors", e que ngForOf (o mesmo que *ngFor) não é uma propriedade conhecida de app-photo.

Apesar de photo-list.component.html não ter sido carregado, o Angular verificará a integridade do template e do componente no processo de compilação. Por que o Angular acha que *ngFor é uma propriedade do componente?

Não tínhamos este erro quando o nosso componente de imagens era acessado pelo PhotoComponent, cujo principal módulo aplicação importa BrowserModule, que traz todas as diretivas além de outras necessidades do Angular para que a aplicação rode no navegador.

Então, a diretiva *ngFor é carregada por meio deste BrowserModule. As diretivas estão disponíveis para app.module.ts e todos os seus componentes, que no caso é apenas AppComponent, e em nenhum momento há importação de diretivas do Angular para usarmos em photos.module.ts.

Não podemos, em hipótese alguma, importar um BrowserModule em outro local que não seja o módulo principal da aplicação. Porque além das diretivas padrão do Angular, o BrowserModule traz uma série de outros recursos para a aplicação funcionar.

De que forma, então, teremos acesso à diretiva *ngFor em outros módulos, já que não poderemos importar BrowserModule?

A boa notícia é que, internamente, o BrowserModule possui especificidades que fazem a aplicação rodar no navegador, e também importa um módulo denominado CommonModule. É ele que possui as declarações das diretivas, e por aí vai. Sendo assim, em imports de photos.module.ts, incluiremos CommonModule, cuja importação automática do Angular colocaremos no primeiro conjunto de importes, seguindo nossas convenções:

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';

//imports dos componentes PhotoComponent e PhotoListComponent

@NgModule({
    declarations: [
        PhotoComponent,
        PhotoListComponent
    ],
    imports: [
        HttpClientModule,
        CommonModule
    ]
})
export class PhotosModule {}

Salvaremos e voltaremos ao navegador, que não exibe nada; o erro, porém, deixa de existir.

Todo módulo a ser criado deverá ser importado como module; trata-se de uma boa prática para tornar as diretivas do Angular, como *ngFor e outras, disponíveis.